import type { CSSProperties } from 'vue';
import type { FontWeight, Numberic, PtComponent, PtComponentConst, TextAlign, Vertical } from "../../../types";
import type { PtContainer } from '../../../types';

export const name = 'text';

type ComponentType = typeof name;

export interface Props {
    text: string;
}

export interface RenderOptions {
    // 字体，基于上层
    font: string;
    // 字体大小，基于上层
    size: Numberic;
    // 行高比例，默认1.4
    lineHeight: number;
    // 颜色，基于上层
    color: string;
    // 对齐方式，默认left
    textAlign: TextAlign;
    verticalAlign: Vertical;
    weight: FontWeight;
    // 文字缩进
    indent: number;
}

export interface ThisComponent extends PtComponent<ComponentType, Props, RenderOptions> {}

export const render = (instance: PtContainer, comp: ThisComponent | PtComponentConst): JSX.Element => {
    const { value, render } = comp;

    const style: CSSProperties = {
        width: '100%',
        fontFamily: render.font,
        fontSize: instance.style.calcSize(render.size || 14),
        lineHeight: render.lineHeight || 1.4,
        color: render.color,
        textAlign: render.textAlign || undefined,
        fontWeight: render.weight,
        textIndent: instance.style.calcSize(render.indent)
    }

    if ('verticalAlign' in render) {
        style.alignSelf = render.verticalAlign == 'top' ? 'flex-start' : render.verticalAlign == 'middle' ? 'center' : 'flex-end';
    }

    return (<div style="display:flex;width:100%">
        <div style={style}>{instance.data.getString(value.text)}</div>
    </div>);
}